<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>检测物管理</title>
<%-- 全站样式 --%>
<jsp:include page="/WEB-INF/jsps/template_style.jsp"></jsp:include>
<link rel="stylesheet"
	href="<c:url value='/assets/js/select2/select2.css'/>">

<script src="<c:url value='/assets/js/select2/select2.min.js'/>"></script>
<script src="<c:url value='/assets/js/select2/select2.full.js'/>"></script>
<style>
#add-btn a {
	background: #f8f8f8;
	width: 15%;
	height: auto;
	font-size: 20px;
}

#add-btn a:hover {
	border: 0px;
}

#add-btn a:link {
	border: 0px;
}
</style>
</head>

<body class="page-body skin-navy">
	<div class="page-container">
		<%--侧边栏 --%>
		<jsp:include page="/WEB-INF/jsps/sidebar.jsp"></jsp:include>
		<div class="main-content">
			<%--导航栏 --%>
			<jsp:include page="/WEB-INF/jsps/navbar.jsp"></jsp:include>

			<div class="page-title">
				<div class="row">
					<div class="title-env col-md-4">
						<h1 class="title">物质管理</h1>
						<p class="description">您可以此页面查看和管理所有的检测物</p>
					</div>
					<div class="col-md-2 col-md-offset-2" id="add-btn">
						<a href="javascript:;" onclick="addName()"
							class="btn btn-default btn-block btn-group-lg"> <i
							class="Example of hand-o-right fa-hand-o-right"></i>添加被检测物
						</a>
					</div>
					<div class="col-md-2" id="add-btn">
						<a href="javascript:;" onclick="addContent()"
							class="btn btn-default btn-block btn-group-lg"> <i
							class="Example of hand-o-right fa-hand-o-right"></i>添加检测内容
						</a>
					</div>
					<div class="col-md-2" id="add-btn">
						<a href="javascript:;"
							onclick="jQuery('#addCategory').modal('show', {backdrop: 'fade'});"
							class="btn btn-default btn-block btn-group-lg"> <i
							class="Example of hand-o-right fa-hand-o-right"></i>添加分类
						</a>
					</div>
				</div>
			</div>
			<div class="row">
				<!-- Custom column filtering -->
				<div class="panel panel-default panel-tabs">
					<div class="panel-heading">
						<h3 class="panel-title">检测物列表</h3>
						<div class="panel-options">
							<ul class="nav nav-tabs">
								<li class="active"><a href="#material" data-toggle="tab">被检测物</a>
								</li>
								<li><a href="#p-material" data-toggle="tab"
									onclick="list()">检测内容</a></li>
							</ul>
						</div>
					</div>
					<div class="panel-body">
						<div class="tab-content">
							<div class="tab-pane active" id="material">
								<div class="panel panel-default">
									<div class="panel-body">
										<table class="table table-striped table-bordered example-3"
											id="example-3">
											<thead>
												<tr class="replace-inputs">
													<th>被检测物名称</th>
													<th>一级分类</th>
													<th>二级分类</th>
													<th>操作</th>
												</tr>
											</thead>
											<tbody>
												<c:forEach var="session_sub" items="${session_sub }">
													<tr>
														<td>${ session_sub.detectedName}</td>
														<td>${ session_sub.firstClassification}</td>
														<td>${ session_sub.secondaryClassification}</td>
														<td><a href="javascript:;" onclick="upd(${session_sub.detectedID },this)"
															class="btn btn-info btn-sm btn-icon icon-left"> 修改 </a><%--  <a
															href="javascript:;"
															onclick="del(${session_sub.detectedID},0)"
															class="btn btn-info btn-sm btn-icon icon-left"> 删除 </a> --%></td>
													</tr>
												</c:forEach>
											</tbody>
										</table>
									</div>
								</div>
							</div>
							<div class="tab-pane" id="p-material">
								<div class="panel panel-default">
									<div class="panel-body">
										<table class="table table-striped table-bordered example-3"
											id="con">
											<thead>
												<tr class="replace-inputs">
													<th>检测ID</th>
													<th>检测内容名称</th>
													<th>检测内容分类</th>
													<th>操作</th>
												</tr>
											</thead>
											<tbody id="con">
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<%--页脚 --%>
			<jsp:include page="/WEB-INF/jsps/footer.jsp"></jsp:include>
		</div>
	</div>

	<div class="page-loading-overlay">
		<div class="loader-2"></div>
	</div>

	<!-- 添加被检测物 -->
	<div class="modal fade" id="addDetected">
		<div class="modal-dialog">
			<div class="modal-content">
				 <form action="<c:url value='/addDetected.do'/>" method="post" id="form-d">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title">添加被检测物</h4>
					</div>

					<div class="modal-body">
						<div class="row">
							<div class="col-md-12">
								<div class="form-group">
									<label for="detectid" class="control-label">被检测物名称</label> <input
										type="text" class="form-control" id="detectid"
										name="detectedName" required="required"/>
								</div>
							</div>
						</div>
						<input type="hidden" name="classifyID" id="cfirst"
							class="form-control" value="" />

						<div class="row">
							<div class="col-md-12">
								<div class="form-group">
									<label for="first" class="control-label">一级分类</label> <select
										class="form-control form-group" id="first"
										onchange="select_sec('sec')">
										<option selected="selected">请选择</option>
									</select>

								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12">
								<div class="form-group">
									<label for="field-1" class="control-label">二级分类</label> <select
										class="form-control form-group" id="sec">
										<option selected="selected">请选择</option>
									</select>
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-white" onclick="check()">确定</button>
					</div>
				</form>
			</div>
		</div>
	</div>

	<!-- 添加检测内容 -->
	<div class="modal fade" id="addContent">
		<div class="modal-dialog">
			<div class="modal-content">
				<form action="<c:url value='/addContent.do'/>" method="post" id="form-c">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title">添加检测内容</h4>
					</div>

					<div class="modal-body">
						<div class="row">
							<div class="col-md-12">

								<div class="form-group">
									<label for="conname" class="control-label">检测内容名称</label> <input
										type="text" class="form-control" id="conname" name="name" required="required"/>
								</div>
							</div>
						</div>
						<input type="hidden" name="categoryID" id="ccategory"
							class="form-control" value="" />
						<div class="row">
							<div class="col-md-12">
								<div class="form-group">
									<label for="field-1" class="control-label">类别名称</label> <select
										class="form-control form-group" id="category">
									<option selected="selected">请选择</option>
									</select>
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-white" onclick="check_con()">确定</button>
					</div>
				</form>
			</div>
		</div>
	</div>

	<!-- 添加分类 -->
	<div class="modal fade" id="addCategory">
		<div class="modal-dialog">
			<div class="modal-content">
				<form action="<c:url value='/addCategory.do'/>" method="post" id="form-cate">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title">添加分类</h4>
					</div>

					<div class="modal-body">
						<div class="row">
							<div class="col-md-12">

								<div class="form-group">
									<label for="cate" class="control-label">分类</label> <select
										class="form-control form-group" name="type" id="cate">
										<option selected="selected">请选择</option>
										<option value="0">一级分类</option>
										<option value="1">二级分类</option>
										<option value="2">检测内容分类</option>
									</select>
								</div>

							</div>
						</div>

						<div class="row">
							<div class="col-md-12">
								<div class="form-group">
									<label for="cateid" class="control-label">分类名称</label> <input
										type="text" class="form-control" id="cateid" name="name" required="required"/>
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
						<button type="submit" class="btn btn-white" onclick="check_cate()">确定</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	
	<div class="modal fade" id="alterDetected">
		<div class="modal-dialog">
			<div class="modal-content">
			<form action="<c:url value='/updateDetected.do'/>" method="post" id="alter-form-d">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title">修改被检测物</h4>
				</div>

				<div class="modal-body">
					<div class="row">
						<div class="col-md-6">

							<div class="form-group">
								<label for="dname" class="control-label">被检测物名称</label> <input
									type="text" class="form-control" id="dname" name="detectedName" value="" required="required"/>
							</div>

						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label for="field-1" class="control-label">一级分类</label> 
								<select
									class="form-control form-group" id="alterfirst"  name="firstClassification"
										onchange="select_sec('altersec')">
								</select>
							</div>

						</div>
					</div>
					<input type="hidden" name="detectedID" id="alterid" value="">
					<input type="hidden" name="classifyID" id="calterfirst" value="">
					<div class="row">
						<div class="col-md-12">
							<div class="form-group">
								<label for="field-1" class="control-label">二级分类</label> 
								<select
									class="form-control form-group" id="altersec" name="secondaryClassification">
								</select>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-white" onclick="alter_checkDect()">确定</button>
				</div>
				</form>
			</div>
		</div>
	</div>
	
	<div class="modal fade" id="alterContent">
		<div class="modal-dialog">
			<div class="modal-content">
			<form action="<c:url value='/updateContent.do'/>" method="post" id="alter-form-c">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title">修改检测内容</h4>
				</div>

				<div class="modal-body">
					<div class="row">
						<div class="col-md-12">

							<div class="form-group">
								<label for="content" class="control-label">检测内容名称</label> <input
									type="text" class="form-control" id="content" name="name" required="required"/>
							</div>

						</div>
					</div>
					<input type="hidden" name="contentID" id="alterconid" value="">
					<input type="hidden" name="categoryID" id="cc-category" value="">
					<div class="row">
							<div class="col-md-12">
								<div class="form-group">
									<label for="field-1" class="control-label">类别名称</label> <select
										class="form-control form-group" id="c-category">

									</select>
								</div>
							</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-white" onclick="alter_checkCon()">确定</button>
				</div>
				</form>
			</div>
		</div>
	</div>
	<div class="modal fade" id="delete">
		<div class="modal-dialog">
			<div class="modal-content">
				<form action="<c:url value='/delete.do'/>" method="post">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title">删除</h4>
					</div>

					<div class="modal-body">
						<div class="row">
							<div class="col-md-offset-4">
								<h4>确定删除吗</h4>
							</div>
						</div>
					</div>
					<input type="hidden" name="id" id="deleteid" value=""> <input
						type="hidden" name="type" id="deletetype" value="">
					<div class="modal-footer">
						<button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
						<button type="submit" class="btn btn-white">确定</button>
					</div>
				</form>
			</div>
		</div>
	</div>

	<%-- 尾部内容 --%>
	<jsp:include page="/WEB-INF/jsps/template_tail.jsp" />

	<!-- Imported styles on this page -->
	<link rel="stylesheet"
		href="assets/js/datatables/dataTables.bootstrap.css">
	<script src="assets/js/datatables/js/jquery.dataTables.min.js"></script>
	<script src="assets/js/datatables/dataTables.bootstrap.js"></script>
	<script src="assets/js/datatables/yadcf/jquery.dataTables.yadcf.js"></script>
	<!--Specific JS for this page-->
	<script type="text/javascript">
		
	</script>
</body>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$("#example-3").dataTable().yadcf([ {
			column_number : 0
		}, {
			column_number : 1,
			filter_type : 'text'
		}, {
			column_number : 2,
			filter_type : 'text'
		}, {
			column_number : 3,
			filter_type : 'text'
		}, ]);
	});

	//检测内容列表
	function list() {
		/*$.ajax({
			type:"POST",
			url:"/listAllContent.do",
			dataType:"json",
			success: function(data){
				/*  $("#con").dataTable({
			        	"ajax":"data",

			        	"colums":[
			        		{"data":"contentName"},
			        		{"data":"categoryName"}
			        	]
			        }); */
		/*alert(data.session_con[1].categoryName);
		for(var i=0;i<data.session_con.length;i++){
			var tr=document.createElement("tr");
			var con=document.getElementById("con");
			con.appendChild(tr);
			
			var td1=document.createElement("td");
			var td2=document.createElement("td");
			var td3=document.createElement("td");
			tr.appendChild(td1);						//添加子标记
			tr.appendChild(td2);
			tr.appendChild(td3);
			
			td1.innerHTML=data.session_con[i].contentName;	
			td2.innerHTML=data.session_con[i].contentName;//添加到td2下
			
			//创建a标签
			var a1=document.createElement("a");
			var a2=document.createElement("a");
			td3.appendChild(a1);
			td3.appendChild(a2);
			
			//给a标签添加属性
			a1.setAttribute("onclick","jQuery('#modal-1').modal('show', {backdrop: 'fade'})");
			a1.setAttribute("class","btn btn-info btn-sm btn-icon icon-left");
			
			a2.setAttribute("onclick","jQuery('#modal-1').modal('show', {backdrop: 'fade'})");
			a2.setAttribute("class","btn btn-info btn-sm btn-icon icon-left");
			//a标签下添加文本
			a1.innerHTML="修改";
			a2.innerHTML="删除";

		}
		}
		});*/
		var table = $('#con').dataTable({
			"aLengthMenu" : [ [ 10, 20, 50, -1 ], [ 10, 20, 50, "All" ] ],
			"processing" : true,
			"ajax" : "/listAllContent.do",
			"columns" : [ 
				{"data" : "contentID"},
				{"data" : "contentName"},
				{"data" : "categoryName"},
				{"render":function ( data, type, row,meta ) {
					return   "<a class='btn btn-info btn-sm btn-icon icon-left' onclick='updcontent("+row.contentID+","+"this"+")'>修改</a>"/*+
					"<a class='btn btn-info btn-sm btn-icon icon-left'onclick='del("+row.contentID+","+1+")'>删除</a>"*/;
					}
			}]
		});
		
	}

//显示一级分类
function showfirst(id){
	$('#'+id).click(function(){
		 var sel = document.getElementById(id);     
		    var selLength = sel.options.length;  
		    if(selLength > 0){     
		        for(var i = 0; i < selLength; i++)     
		        {     
		            var option = sel.options[i];     
		            //var optText = option.text;     
		            var optValue = option.value;//获取value值   
		             //判断是否为a然后remove掉 
		             if(optValue == 'a'){
		            	 sel.remove(i);
		             }
		        }     
		    }   
		 $.ajax({  
	         url: "/listAllDetectCategory.do",     
	         type: "post",  
	         dataType: "json",  
	         contentType: "application/json",  
	         traditional: true,  
	         success: function (data) { 
	        	 //后台返回的数据
	        	 var s=data.data;
	        	 for (var i = 0; i < s.length; i++) {
	        		                 $('#'+id).append("<option value='"+s[i].classifyID+"'>" + s[i].firstClassification + "</option>");
	        		            }
	        
	         },  
	         error: function (msg) {  
	             alert("出错了！");  
	         }  
	     });  
		 	//获取分类id赋值给输入框
			var classifyID=$('#'+id).find("option:selected").val();
			$('#c'+id).val(classifyID);
			console.log(classifyID);
			
	});
		
}

//显示二级分类
function select_sec(sid){
	 var sel = document.getElementById(sid);     
	    var selLength = sel.options.length;  
	    if(selLength > 0){     
	        for(var i = 0; i < selLength; i++)     
	        {     
	            var option = sel.options[i];     
	            //var optText = option.text;     
	            var optValue = option.value;//获取value值   
	             //判断是否为a然后remove掉 
	             if(optValue == 'a'){
	            	 sel.remove(i);
	             }
	        }     
	    }   
	$.ajax({  
        url: "/listAllDetectCategory.do",    //后台webservice里的方法名称  
        type: "post",  
        dataType: "json",  
        contentType: "application/json",  
        traditional: true,  
        success: function (data) { 
       	 var s=data.data;
       	 for (var i = 0; i < s.length; i++) {
       		                 $('#'+sid).append("<option value='"+s[i].secondaryClassificationId+"'>" + s[i].secondaryClassification + "</option>");
       		            }
        },  
        error: function (msg) {  
            alert("出错了！");  
        }  
    });
}

//显示检测内容分类
function showcategories(cid){
	
	$('#'+cid).click(function(){
		 var sel = document.getElementById(cid);     
		    var selLength = sel.options.length;  
		    if(selLength > 0){     
		        for(var i = 0; i < selLength; i++)     
		        {     
		            var option = sel.options[i];     
		            //var optText = option.text;     
		            var optValue = option.value;//获取value值   
		             //判断是否为a然后remove掉 
		             if(optValue == 'a'){
		            	 sel.remove(i);
		             }
		        }     
		    }    
		$('#'+cid).find(option[0]).remove();
		 $.ajax({  
	         url: "/listAllContentCategory.do",  
	         type: "post",  
	         dataType: "json",  
	         contentType: "application/json",  
	         traditional: true,  
	         success: function (data) { 
	        	 var s=data.session_cc;
	        	 for (var i = 0; i < s.length; i++) {
	        		                 $('#'+cid).append("<option value='"+s[i].categoryID+"'>" + s[i].name + "</option>");
	        		            }	        	
	         },  
	         error: function (msg) {  
	             alert("出错了！");  
	         }  
	     });  
			var categoryID=$('#'+cid).find("option:selected").val();
			$('#c'+cid).val(categoryID);
			console.log(categoryID);
			
	});
		
}

//回显数据
function setinfo(obj){
	$('#alterfirst').find("option").remove(); 
	$('#altersec').find("option").remove(); 
	//找到table父元素
    var table=obj.parentNode.parentNode;
	//找到第一个td
	var name=$(table).find('td')[0];
	//获取td标签的内容
	var detectedName=$(name).text();
	//赋值给input
	$('#dname').val(detectedName);	
	
	var fname=$(table).find('td')[1];
	var firstname=$(fname).text();
	$("#alterfirst").prepend("<option value='a'>"+firstname+"</option>");
	
	var sname=$(table).find('td')[2];
	var secname=$(sname).text();
	$("#altersec").prepend("<option value='a'>"+secname+"</option>");
	
}

//回显检测内容数据
function setinfoContent(obj){
	$('#c-category').find("option").remove(); 
	//找到table父元素
    var table=obj.parentNode.parentNode;;
	
	var cname=$(table).find('td')[1];
	var contentName=$(cname).text();
	$('#content').val(contentName);	
	
	var categoryname=$(table).find('td')[2];
	var category=$(categoryname).text();
	$("#c-category").prepend("<option value='a'>"+category+"</option>");
	
}

//添加被检测物
function addName(){
	showfirst('first');
	jQuery('#addDetected').modal('show', {backdrop: 'fade'});
}

//添加检测内容
function addContent(){
	showcategories('category');
	jQuery('#addContent').modal('show', {backdrop: 'fade'});
}

//删除操作
function del(id,type){
	$('#deleteid').val(id);
	$('#deletetype').val(type);
	
	jQuery('#delete').modal('show', {backdrop: 'fade'});
}

//修改被检测物
function upd(id,obj){	
	showfirst('alterfirst');
	$('#alterid').val(id);	
	setinfo(obj);
	jQuery('#alterDetected').modal('show', {backdrop: 'fade'});
}

//修改检测内容
function updcontent(id,obj){
	showcategories('c-category');
	$('#alterconid').val(id);
	setinfoContent(obj);
	jQuery('#alterContent').modal('show', {backdrop: 'fade'});
}
//添加被检测物的验证
function check(){
	var s=document.getElementById("cfirst").value; 
	var name=document.getElementById("detectid").value;
	$("#detectid").blur(function(){	
		  if(name.length == 0){
			  alert("名称不能为空");		     
		  }
	});
	 if(name.length == 0){
		  alert("名称不能为空");
		  return;
	  }
	if(null == s || undefined == s || s ==''){
		alert("请选择一级类别");
		return false;
	}
	document.getElementById("form-d").submit();
}


//添加检测内容的验证
function check_con(){
	var s=$("#category option:selected").val();   
	$("#conname").blur(function(){
		
		var name=document.getElementById("conname").value;
		  if(name.length == 0){
			  alert("名称不能为空");		     
		  }
	});
	 if(name.length == 0){
		  alert("名称不能为空");
		  return;
	  }
	if(s == "请选择"){
		alert("请选择检测内容的类别");
		return false;
	}
	document.getElementById("form-c").submit();
}

//添加分类的验证
function check_cate(){
	var s=$("#cate option:selected").val(); 
	$("#cateid").blur(function(){
		var name=document.getElementById("cateid").value;
		  if(name.length == 0){
			  alert("名称不能为空");		     
		  }
	});
	 if(name.length == 0){
		  alert("名称不能为空");
		  return;
	  }  
	if(s == "请选择"){
		alert("请选择添加分类的类别");
		return false;
	}
	document.getElementById("form-cate").submit();
}

//修改被检测物的验证
function alter_checkDect(){
	var s=document.getElementById("calterfirst").value;
	$("#dname").blur(function(){
		var name=document.getElementById("dname").value;
		  if(name.length == 0){
			  alert("名称不能为空");		     
		  }
	});
	 if(name.length == 0){
		  alert("名称不能为空");
		  return;
	  } 
	if(null == s || undefined == s || s ==''){
		alert("请选择一级类别");
		return false;
	}
	document.getElementById("alter-form-d").submit();
}

//修改检测内容的验证
function alter_checkCon(){
	var s=document.getElementById("cccategory").value; 
	$("#content").blur(function(){
		var name=document.getElementById("content").value;
		  if(name.length == 0){
			  alert("名称不能为空");		     
		  }
	});
	 if(name.length == 0){
		  alert("名称不能为空");
		  return;
	  }
	if(null == s || undefined == s || s ==''){
		alert("请选择检测内容的类别");
		return false;
	}
	document.getElementById("alter-form-c").submit();
}
</script>
</html>